<template lang="pug">
.view-port-container
  viewHeader
  vuedraggable(
    tag="section"
    class="main-content"
    style="min-height:700px;"
    v-model="currentPage.list"
    v-bind="{group:'people', ghostClass: 'ghost'}"
    @add="handleWidgetAdd")
    template(
      v-for="(item, index) in (currentPage.list || [])"
      :key="index")
      template(v-if="item.layout")
        layoutCom(:data="item")
      template(v-else)
        elementCom(:data="item")
</template>

<script lang="ts">
import { defineComponent, computed } from "vue";
import { useStore } from "vuex";
import { VueDraggableNext } from "vue-draggable-next";
import viewHeader from "./viewHeader.vue";
import { addDraggerWidget } from "@/components/lowCode/json/tool";
import * as BaseTypes from "@/stores/base-type";
import layoutCom from "./layout.vue";
import elementCom from "./element.vue";
export default defineComponent({
  name: "",
  components: {
    vuedraggable: VueDraggableNext,
    viewHeader,
    layoutCom,
    elementCom,
  },
  setup() {
    const store = useStore();
    const contentJson = computed(() => {
      return store.state.lowCode.contentJson;
    });
    // 获取当前页面
    const currentPage = computed(() => {
      let pageItem = { list: [] };
      const pages = contentJson.value.pages || [];
      pages.forEach((item: any) => {
        if (item.key === contentJson.value.currentPage) {
          pageItem = item;
        }
      });
      return pageItem;
    });

    const handleWidgetAdd = (evt: any) => {
      console.log(evt);
      const newIndex = evt.newIndex;
      // TODO 这样写好烦，没有找到好的写法，后续更新
      let ele = addDraggerWidget(currentPage.value.list[newIndex]);
      currentPage.value.list[newIndex] = ele;
      store.commit(`lowCode/${BaseTypes.SET_SELECTEDWIDGET}`, ele);
    };
    return {
      currentPage,
      handleWidgetAdd,
    };
  },
});
</script>

<style lang="stylus" scoped>
.view-port-container
  border-right: solid 1px #e6e6e6;
  width: 100%;
</style>
